<template>
    <!-- http://localhost:8080/phone/brand/${101}/ -->
    <div class="wrap">
        <div v-if="page !== null">
<!--            <el-row type="flex" class="row-class" :gutter="60">
                <el-col :span="6" v-for="(item,index) in page.list" :key="index" style="margin-bottom: 20px">
                    <ProductItem :item="item"></ProductItem>
                </el-col>
            </el-row>-->

            <div style="display: flex;flex-direction: row;flex-wrap: wrap">
                <ProductItem v-for="(item,index) in page.list" :key="index"
                             :item="item"
                             style="width: calc(25% - 50px);margin: 10px 25px">
                </ProductItem>
            </div>

            <!--分页-->
            <el-pagination class="nav-fenye"
                           @current-change="handleCurrentChange"
                           :current-page="this.page.currentPage"
                           :page-size="this.page.pageSize"
                           layout="total, prev, pager, next, jumper"
                           :total="this.page.total">
            </el-pagination>
        </div>
        <div v-else>
            <el-result icon="warning" title="警告提示" subTitle="当前品牌还没有商品">
                <template slot="extra">
                    <el-button type="primary" size="medium" @click="$router.push('/')" >返回</el-button>
                </template>
            </el-result>
        </div>
    </div>

</template>

<script>
    import ProductItem from "@components/product/ProductItem";
    import { getBrandById } from "@/api/categoryAndBrand";

    export default {
        name: "Brand",
        components:{ProductItem},
        data(){
            return{
                cardBodyStyle:{
                    padding: '0 5px',
                    height: '290px',
                    overflow: 'hidden',
                    cursor: 'pointer'
                },
                page: {},
            }
        },
        methods:{
            goto(brand){
                console.log(brand)
                this.$router.push({ path: `/brand/${brand}/`,})
            },
            handleCurrentChange(currentPage){//处理分页数据
                this.init(currentPage)
            },
            init(currentPage){
                getBrandById(this.$route.params.brand, currentPage).then(response => {
                    console.log(response)
                    if (response.state === true) {
                        if (response.data.page.list.length !== 0){
                            this.page = response.data.page
                        }else {
                            this.page = null
                        }
                        this.$notify.success({title: '成功',message: response.message, duration: 1500});
                    }else{
                        this.$notify.warning({title: '失败',message: response.message, duration: 1500});
                    }
                })
            },
        },
        beforeMount(){
            console.log("brand.vue接收的参数",this.$route.params.brand)
            this.init(1)
        },
    }
</script>

<style scoped>
    .wrap{
        width: 70vw;
        margin: 0 auto;
    }
    .title{
        display: flex;
        justify-content: space-between;
        padding: 0 5px;
        margin-bottom: 10px;
    }
    .title a{
        font-size: 25px;
    }
    .item-img-wrap{
        margin: 0 auto 18px;
        width: 160px;
        height: 160px;
    }
    .item-img-wrap img{
        width: 160px;
        height: 160px;
    }
    .item-text-wrap{
        display: flex;
        flex-direction: column;
    }
    .item-text-wrap a{
        margin-bottom: 10px;
    }
    .item-text-wrap a:nth-child(2){
        margin-bottom: 20px;
    }
    >>>.el-link--inner{
        text-align: center;
        text-overflow: ellipsis;
        overflow: hidden;
    }


    .row-class{
        flex-wrap: wrap;
    }

    @media (max-width: 1300px){
        .item-logo{
            display: none;
        }
    }
</style>
